<template>
    <div>
        <div class="sale-type-box">
            <el-radio-group v-model="form.saleType" @change="changeSaleType">
                <div><el-radio-button value="按金额优惠">按金额优惠</el-radio-button></div>
                <div><el-radio-button value="按折扣优惠">按折扣优惠</el-radio-button></div>
                <div><el-radio-button value="输入付款金额">输入付款金额</el-radio-button></div>
            </el-radio-group>
        </div>
        <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="优惠金额：" prop="salaAmt">
                        <div class="salaAmt">{{ yhje }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.saleType == '按金额优惠'">
                    <el-form-item label="扣减金额：" prop="salaAmt">
                        <el-input v-model="form.salaAmt" placeholder="请输入金额" @focus="focusForm('salaAmt')" @blur="blurForm"
                            clearable oninput="value=value.replace(/[^0-9.]/g,'')"/>
                        <!-- <el-input-number class="input-number" v-model="form.salaAmt" :min="0" :max="10" :precision="2"  :controls="false" placeholder="请输入金额"
                            @focus="focusForm('salaAmt')" @blur="blurForm" clearable style="width: 100%;"/> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-else-if="form.saleType == '按折扣优惠'">
                    <el-form-item label="折扣比例：" prop="salaPercent">
                        <el-input v-model="form.salaPercent" placeholder="0.1〰️9.9只支持1位小数" @focus="focusForm('salaPercent')"
                            @blur="blurForm" clearable oninput="value=value.replace(/[^0-9.]/g,'')"/>
                        <!-- <el-input-number class="input-number" v-model="form.salaPercent" :min="0.1" :max="9.9" :precision="1"  :controls="false" placeholder="请输入金额"
                            @focus="focusForm('salaPercent')" @blur="blurForm" clearable style="width: 100%;"/> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-else-if="form.saleType == '输入付款金额'">
                    <el-form-item label="最终付款金额：" prop="finalAmt">
                        <el-input v-model="form.finalAmt" placeholder="请输入金额" @focus="focusForm('finalAmt')"
                            @blur="blurForm" clearable oninput="value=value.replace(/[^0-9.]/g,'')"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup >
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
// 接收父组件参数 props
const props = defineProps({
    tableInfo: {
        type: Object,
        required: false,
    },
    selectWares: {
        type: Array,
        required: false,
    },
    saleData: {
        type: Array,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    form: {
        type: Object,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
    receive: {
        type: String,
        required: false,
    },
    yhje: {
        type: String,
        required: false,
    },
    unpay: {
        type: String,
        required: false,
    },
    bookAmtForm:{
        type: Object,
        required: false,
    }
})

const receive = toRef(props, 'receive')
const price = toRef(props, 'price')
const tableInfo = toRef(props, 'tableInfo')
const selectWares = toRef(props, 'selectWares')
const saleData = toRef(props, 'saleData')
const payData = toRef(props, 'payData')
const yhje = toRef(props, 'yhje')
const form = toRef(props, 'form')
const unpay = toRef(props, 'unpay')
const bookAmtForm = toRef(props, 'bookAmtForm')
const emit = defineEmits(['focusForm'])



// 数字键盘
const focusForm = (str) => {
    // keyboard.value = true
    emit('focusForm', str)
}
const blurForm = (params) => {
    // keyboard.value = false
    let value = parseFloat(form.value.salaPercent);
    if (!isNaN(value)) {
        // 限制在0.1到10之间，然后保留一位小数
        value = Math.min(Math.max(value, 0.1), 9.9); // 注意：原要求是0.1到9.9，这里根据描述“0-10之间”做了调整
        value = Math.floor(value * 10) / 10
        form.value.salaPercent = parseFloat(value.toFixed(1))
    } else {
        // 非数字输入时的处理，这里简单清空
        form.value.salaPercent = '';
    }
}
// 切换form.saleType
const changeSaleType = () => {
    form.value.salaAmt = ''
    form.value.salaPercent = ''
    form.value.finalAmt = ''
}

// 父组件小键盘点击确定
const handleKeyboardConfirm = async(params) => {
    let flag = false
    saleData.value.forEach(item => {
        if (item.yhxm == form.value.actionType) {
            flag = true
        }
    });
    // console.log('form.value.salaAmt > unpay.value :>> ', form.value.salaAmt, unpay.value, form.value.salaAmt > unpay.value);
    
    if (Number(form.value.salaAmt) > Number(receive.value)  ) return ElNotification({
        title: '提示',
        message: '优惠金额不能大于应收金额',
        type: 'warning',
    })
    // if (Number(form.value.salaAmt) > Number(unpay.value)  ) return ElNotification({
    //     title: '提示',
    //     message: '优惠金额不能大于还需收款金额',
    //     type: 'warning',
    // })
    if (flag) return ElNotification({
        title: '提示',
        message: '已经存在折扣优惠',
        type: 'warning',
    })
    const saleObj = {
        yhxm: form.value.actionType,
        je: yhje.value,
        code: tableInfo.value.payBatchCode,
        amt: yhje.value,
        type: form.value.actionType,
        subType: form.value.saleType,
    }
    saleData.value.push(saleObj)

    // console.log('saleData :>> ', saleData);
}

// 暴露方法给父组件
defineExpose({ handleKeyboardConfirm })
</script>

<style scoped lang="scss">
.sale-type-box {
    // width: 360px;
    // display: flex;
    // justify-content: space-between;
    padding-top: 20px;

    ::v-deep {
        .el-radio-group {
            display: flex;
            justify-content: space-between;
        }

        .el-radio-button {
            .el-radio-button__inner {
                width: 112px;
                height: 48px;
                line-height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
                border: 0;
                padding: 0;
            }
        }

        .is-active {
            .el-radio-button__inner {
                background: #FFE566;
                color: #212121;
            }
        }
    }
}

.form-box {
    margin-top: 20px;

    ::v-deep {
        .el-input__wrapper {
            background: #F9F9F9;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #999999;
        }
    }

    .salaAmt {
        font-weight: 400;
        font-size: 16px;
        color: #FF3333;
    }

}
@import '@/styles/com_style_input.css';
</style>
